<template>
  <div>
    <vxe-grid id="xGrid" ref="xGrid" column-key v-bind="gridOptions" :height="52*12" header-align="center">
      <template #toolbar_buttons>
        <span class="title">PROGRAM LIST：</span>
        <vxe-input v-model="params.program" clearable placeholder="检索PROGRAM" />
        <vxe-button @click="selectEvent">查询</vxe-button>
      </template>
      <template #pager>
        <vxe-pager
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          :current-page.sync="gridOptions.pagerConfig.currentPage"
          :page-size.sync="gridOptions.pagerConfig.pageSize"
          :total="gridOptions.pagerConfig.total"
          @page-change="handlePageChange"
        />
      </template>
    </vxe-grid>
  </div>
</template>

<script>
import { VxeListMixin } from '@/mixins/VxeListMixin'

export default {
  components: {

  },
  mixins: [VxeListMixin],
  data() {
    return {
      list: null,
      listLoading: true,
      machineLoading: false,
      tableHeight: 160,
      url: {
        queryList: this.$api.projectController.getProgramList,
        setProgramList: this.$api.projectController.setProgramList
      },
      params: {
        page: 1,
        pageSize: 10,
        projectId: 'J6',
        program: '' // 检索，存在空情况
      },
      toolbarConfig: {
        slots: {
          buttons: 'toolbar_buttons'
        }
      },
      editConfig: {
        trigger: 'click',
        mode: 'cell',
        showStatus: true
      },
      editRules: {
        idealTestTime: [
          { required: true, message: '请输入目标测试时间' },
          {
            validator: ({ cellValue }) => {
              return new Promise((resolve, reject) => {
                const regex = /^(\d+|\d+\.\d+)$/
                if (regex.test(cellValue)) {
                  resolve()
                } else {
                  reject(new Error('请输入整数或小数'))
                }
              })
            }
          }
        ],
        targetYield: [
          { required: true, message: '请输入目标良率' },
          {
            validator: ({ cellValue }) => {
              return new Promise((resolve, reject) => {
                const regex = /^(\d+|\d+\.\d+)$/
                if (regex.test(cellValue)) {
                  resolve()
                } else {
                  reject(new Error('请输入整数或小数'))
                }
              })
            }
          }
        ]
      },
      columns: [
        { type: 'seq', title: '序号', width: 70, fixed: 'left', align: 'right' },
        { field: 'program', title: 'PROGRAM', width: 540 },
        { field: 'idealTestTime', title: 'IDEAL Test Time Per DUT(:ms)', minWidth: 80, editRender: { name: 'input' }},
        { field: 'targetYield', title: 'TARGET YIELD:%', minWidth: 80, editRender: { name: 'input' }}
      ],
      data: [
        { id: 10001, program: 'program1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
        { id: 10002, program: 'program2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, program: 'program3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, program: 'program4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
        { id: 10004, program: 'program5', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
        { id: 10004, program: 'program6', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
        { id: 10004, program: 'program7', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
        { id: 10004, program: 'program8', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
        { id: 10004, program: 'program9', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
        { id: 10004, program: 'program10', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
      ]
    }
  },
  watch: {
    params: {
      handler(newValue, oldValue) {
        if (newValue.time == null) {
          newValue.time = []
        }
      },
      deep: true
    }
  },
  mounted() {

  },
  created() {
    this.gridOptions.columns = this.columns
    this.gridOptions.toolbarConfig = this.toolbarConfig
    this.gridOptions.editConfig = this.editConfig
    this.gridOptions.editRules = this.editRules
    // this.gridOptions.data = this.data
    // this.init()
  },
  methods: {
    init(projectId) {
      this.params.projectId = projectId
      this.url.query = this.url.queryList
      this.query()
    },
    selectEvent() {
      this.query()
    },
    async setProgramList(projectId) {
      const errMap = await this.$refs.xGrid.validate(true)
      if (errMap) {
        return this.$message.error('program校验不通过！')
      } else {
        const param = {
          projectId: projectId,
          programList: this.gridOptions.data
        }
        this.$fetchData(this.url.setProgramList, param, 'post').then(res => {
          this.$message.success('program设置成功')
        })
      }
    }
  }
}
</script>
<style  lang="scss" scoped>
.title{
    font-weight: 700;
    line-height: 34px;
}
</style>
